<template>

  <div id='app'>
    <div class='meun'>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label='世界地图' name="first" ></el-tab-pane>
    <el-tab-pane label="中国地图" name="second"></el-tab-pane>
    <el-tab-pane label="广东地图" name="third" ></el-tab-pane>
  </el-tabs>
  </div>
    <div class='first'>
    <div  id='main'></div>
    <div id='fifth'></div>   
    <!-- 柱状图 -->
    <!-- 波形图 -->
    </div>
    <div class='seconde'>
      <div class='number'>
          <ul>
            <li ><label style='font-size:50px'  >{{chinaadd}}</label> </li>
              <li><label style='font-size:50px' >{{add}}</label> </li>
             <li><label style='font-size:50px' >{{forgien}}</label> </li>
              <li><label style='font-size:50px' >{{dead}}</label> </li>
          </ul>
            <ul >
            <li class='test'><label style='font-size:30px'>累计确诊</label> </li>
              <li class='test'><label style='font-size:30px'>新增确诊</label> </li>
             <li class='test'><label style='font-size:30px'>境外输入</label> </li>
              <li class='test'><label style='font-size:30px'>死亡人数</label> </li>
          </ul>

      </div>

      <div id='chinamap'></div>
    </div>
    <div class='three'>
    <div id='number'></div>
    <div id='strong'></div>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
import china from 'echarts/map/js/china.js'
export default {
  
  data () {
    return {
      ChinaData:{},
      proviceData:[],
      mapdata:[],
       activeName: 'second',
       chinaadd:'',
       add:'',
       dead:'',
      forgien:''
      
    }
  },
  created(){
   
  },
  mounted(){
    this.getData()

  },
  methods:{
    getmap(){
    let echarts = require('echarts');
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));
      let chinaChart=echarts.init(document.getElementById('chinamap'))
      let chart=echarts.init(document.getElementById('number'))
      let chart1=echarts.init(document.getElementById('fifth'))
      let chart2=echarts.init(document.getElementById('strong'))
      // 绘制图表
      this.mapdata=JSON.parse(this.proviceData)
      myChart.setOption({
          title: {
              text: '前六省份新冠肺炎统计图'
          },
          tooltip: {},
          xAxis: {
              data:[this.mapdata[32].name,this.mapdata[31].name,this.mapdata[30].name,this.mapdata[29].name,this.mapdata[28].name,this.mapdata[27].name]
          },
          yAxis: {},
          series: [{
              name: '感染人数',
              type: 'bar',
              data: [this.mapdata[32].value,this.mapdata[31].value,this.mapdata[30].value,this.mapdata[29].value,this.mapdata[28].value,this.mapdata[27].value]
          }],
      });
      //中国地图
      chinaChart.setOption({
        title:{
          text:'中国新冠肺炎分布图'
        },
        series:[{
          type:'map',
          map:'china',
           label:{
            normal:{
              show:true
            }
          },
          data:this.mapdata
        }],
        visualMap:[{
          type:"piecewise",
          show:true,
          pieces:[{min:10000},
                  {min:1000,max:9999},
                  {min:100,max:999},
                  {min:10,max:99},
                  {min:1,max:9}
          ]
        }],

      })
      //折线图
      chart.setOption({
        xAxis: {
        type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
          })
          //前五省波形图
  chart1.setOption({
      title: {
       
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: [this.mapdata[32].name,this.mapdata[31].name,this.mapdata[30].name,this.mapdata[29].name,this.mapdata[28].name,this.mapdata[27].name]
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: this.mapdata[32].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: this.mapdata[32].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: this.mapdata[31].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: this.mapdata[30].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
        },
           {
            name: this.mapdata[29].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
        },
            {
            name: this.mapdata[28].name,
            type: 'line',
            stack: '总数',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:this.mapdata[27].name,
            type: 'line',
            stack: '总数',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
        })
//比重图
    chart2.setOption({
      title: {
      
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [this.mapdata[32].name,this.mapdata[31].name,this.mapdata[30].name,this.mapdata[29].name,this.mapdata[28].name,this.mapdata[27].name]
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: this.mapdata[32].value, name: this.mapdata[32].name},
                {value: this.mapdata[31].value, name: this.mapdata[31].name},
                {value: this.mapdata[30].value, name: this.mapdata[30].name},
                {value: this.mapdata[29].value, name: this.mapdata[29].name},
                {value: this.mapdata[28].value, name: this.mapdata[28].name},
                 {value: this.mapdata[27].value, name: this.mapdata[27].name},
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
    })
    },
    
    getProvice(data){
       for(var i=0;i<34;i++){
        // this.provice.total=''
        const provice={}
        provice.value=data[i].total.confirm
        provice.name=data[i].name
        this.proviceData[i]=provice
       }
       this.proviceData=this.DataSort(this.proviceData)
       this.proviceData=JSON.stringify(this.proviceData)
    },
    DataSort(data){
        for(var i=0;i<34;i++){
          for(var j=i+1;j<34;j++){
            if(data[j-1].value>data[j].value){
              var provice=data[j-1]
              data[j-1]=data[j]
              data[j]=provice
            }
          }
        }
        return data
    },
    getData(){
           axios.get('getOnsInfo?name=disease_h5').then(response=>{
           var ret= response.data.data
          if(typeof ret === 'string'){
            var reg = /^\w+\(({[^()]+})\)$/
            var matches = ret.match(reg)  
            if(matches){             
              ret = JSON.parse(matches[1])
            }
          }
          
          this.ChinaData=JSON.parse(ret)
          console.log(this.ChinaData)
          this.chinaadd=this.ChinaData.chinaTotal.confirm
          this.dead=this.ChinaData.chinaTotal.dead
          this.add=this.ChinaData.chinaAdd.confirm
          this.forgien=this.ChinaData.chinaTotal.importedCase

          console.log(this.chinaadd)
          this.getProvice(this.ChinaData.areaTree[0].children)
          this.getmap()
    })
        
    },
    handleClick(tab, event){
         if(tab.index==0){
           this.$router.push({path:'/world'})
          }
          if(tab.index==2){
            this.$router.push({path:'/guangdong'})
          }
    },
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.first{
  float: left;
}
.seconde{
  float: left;
}
.three{
  float:right;
  margin-left: 20px;
}
#main{
  width:400px;
  height:400px;
  margin-top:-40px;
  margin-left:20px;

}
#chinamap{
  width:640px;
  height:500px;
  margin-top:-40px;
  margin-left: -30px;
}

#number{
  width:380px;
  height:400px;
  margin-top:-60px;
}
/* .but{
  position: absolute;
  
} */
#fifth{
   width:380px;
  height:400px;
  margin-left:5px;
}
#strong{
   width:380px;
  height:400px;
}
ul{
  margin-bottom: 50px;
  margin-left: -160px;
  margin-top: -30px;
}
ul li{
  list-style-type:none;
     display:inline; 
     margin-left:30px
}
.meun{
  margin-top:-60px ;
  margin-bottom: 40px;
}
.test{
  margin-left: 10px;
}
</style>
